<!-- 会计科目->发生额及科目余额表 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <!--<div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                         <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="searchDynamic">
                                <a-icon class="btns-icon" type="search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col> -->
            <!-- <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">总帐</div>
                            </div>
                        </a-col> 
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="export" />
                                <div class="btns-text">导出</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>-->
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <div style="min-height:400px;">

                    <h3 class="text-center">
                        <span class="text-name">科目余额表</span><br>
                    </h3>
                    <div class="date-tp">
                        <div class="bills-box-header">
                            <div class="filter" style="width:340px;">
                                <div class="filter-label">科目编码:</div>
                                <div class="filter-control" style="display:flex">
                                    <div style="flex:1">
                                        <a-input @click="searchGroup(1,'begin')" @change="searchGroup(2,'begin')" v-model="planData.beginCode" autocomplete="off" placeholder="请选择科目名称"></a-input>
                                        <search-group-header ref="credentialsSearchA" :inputValue="planData.beginCode" :componentName="'accountingRadio'" @clickItem="setValue(1,$event)" :searchData="searchData"></search-group-header>
                                    </div>
                                    <div style="flex:0 0 20px;line-height:32px">-</div>
                                    <div style="flex:1">
                                        <a-input @click="searchGroup(1,'end')" @change="searchGroup(2,'end')" v-model="planData.endCode" autocomplete="off" placeholder="请选择科目名称"></a-input>
                                        <search-group-header ref="credentialsSearchB" :inputValue="planData.endCode" :componentName="'accountingRadio'" @clickItem="setValue(2,$event)" :searchData="searchData"></search-group-header>
                                    </div>
                                </div>

                            </div>
                            <div class="filter">
                                <div class="filter-label">期间:</div>
                                <div class="filter-control" style="width:340px;">
                                    <a-select style="width:40%" placeholder="开始月份" v-model="planData.beginDate" @change="((date,dateString)=>{handlerMonth(date,dateString,1)})">
                                        <a-select-option v-for="(item,index) in monthArray" :key="index" :value="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>-
                                    <a-select style="width:40%" placeholder="结束月份" v-model="planData.endDate" @change="((date,dateString)=>{handlerMonth(date,dateString,2)})">
                                        <a-select-option v-for="(item,index) in monthArray" :key="index" :value="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </div>
                            <div class="filter">
                                <div class="filter-label">级次:</div>
                                <div class="filter-control" style="line-height:32px">
                                    <a-select :default-value="1" v-model="planData.beginDepth" style="width:30%" @change="handleChange">
                                        <a-select-option v-for="(item,index) in beginDepthArray" :key="index" :value="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>-
                                    <a-select :default-value="1" v-model="planData.endDepth" style="width:30%" @change="handleChange">
                                        <a-select-option v-for="(item,index) in endDepthArray" :key="index" :value="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>
                                    <!-- <a-checkbox style="width:30%;line-height:38px" v-model="planData.isEndNode">是否末级</a-checkbox> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <section>
                        <a-row>
                            <a-col :span="24">
                                <div class="table-box">
                                    <a-table id="bills_tb" class="table-null-setyle" :columns="columns" :data-source="dataSource" :pagination="false" :size="small" :scroll="{x:1000,y:400}" bordered>
                                        <template slot="beginAmount" slot-scope="text">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="debitAmount" slot-scope="text">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="creditAmount" slot-scope="text">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="endAmount" slot-scope="text">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                    </a-table>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="edit-mask" v-show="editMask">
                            <!-- 遮罩（点击修改关闭遮罩） -->
                        </div>
                    </section>

                </div>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>
    </div>
</template>
<script>

import moment from "moment";
import searchGroupHeader from "@/components/Finance/searchGroupHeader";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import { save, getNowAccount } from '@/api/finance/accountingSearch';

import { ledgerList, fsList } from '@/api/finance/subjectsBalance';//总分类帐列表查询
import { number2Format } from "@/utils/tool/number-formart"

export default {
    components: {
        searchGroupHeader,
        FormSearchGroup,        //搜索选择
    },
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [{
                title: '级次',
                key: 'accountingDepth',
                dataIndex: 'accountingDepth',
                width: 50,
                align: 'center'
            }, {
                title: '科目编码',
                key: 'accountingCode',
                dataIndex: 'accountingCode',
                width: 100,
                align: 'left',
                customRender: (text, row, index) => {
                    if (row.accountingDepth != 1) {
                        let lelft = 8 * row.accountingDepth + "px";
                        let style = { marginLeft: lelft };
                        return <span style={style} >{text}</span>;
                    } else {
                        return <span>{text}</span>;
                    }
                }
            }, {
                title: '科目名称',
                key: 'accountingName',
                dataIndex: 'accountingName',
                width: 100,
                align: "left",
                customRender: (text, row, index) => {
                    if (row.accountingDepth != 1) {
                        let lelft = 8 * row.accountingDepth + "px";
                        let style = { marginLeft: lelft };
                        return <span style={style} >{text}</span>;
                    } else {
                        return <span>{text}</span>;
                    }
                }
            },
            {
                title: '期初',
                children: [
                    {
                        title: '方向',
                        dataIndex: 'beginAmountDirection',
                        width: 50,
                        align: 'center',
                        customRender: (text, record) => {
                            return text == 1 ? '借' : text == 2 ? '贷' : '平';
                        }
                    }, {
                        title: '金额',
                        dataIndex: 'beginAmount',
                        width: 200,
                        align: 'right',
                        scopedSlots: { customRender: "beginAmount" }
                        // customRender: (text) => {
                        //     return Number(text) < 0 ? number2Format(text) : '0.00';
                        // }
                    },
                ]
            }, {
                title: '本期发生',
                children: [
                    {
                        title: '借方金额',
                        dataIndex: 'debitAmount',
                        width: 200,
                        scopedSlots: {
                            customRender: 'debitAmount'
                        },
                        align: 'right',
                    }, {
                        title: '贷方金额',
                        dataIndex: 'creditAmount',
                        width: 200,
                        align: 'right',
                        scopedSlots: {
                            customRender: 'creditAmount'
                        },
                    },
                ]
            }, {
                title: '期末',
                children: [
                    {
                        title: '方向',
                        dataIndex: 'endAmountDirection',
                        width: 50,
                        align: 'center',
                        customRender: (text, record) => {
                            return text == 1 ? '借' : text == 2 ? '贷' : '';
                        }
                    }, {
                        title: '金额',
                        dataIndex: 'endAmount',
                        width: 200,
                        align: 'right',
                        scopedSlots: {
                            customRender: 'endAmount'
                        },
                        // customRender: (text) => {
                        //     return Number(text) < 0 ? number2Format(Math.abs(text)) : '0.00';
                        // }
                    },
                ]
            }],
            name: null,
            code: null,
            dataSource: [],
            beginDate: null,
            endDate: null,
            setTime: null,  //延迟请求
            endOpen: false,
            beginDepthArray: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            endDepthArray: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            planData: {
                beginDate: null,
                endDate: null,
                // currencyId: null,
                // currencyName: null,
                // isEndNode: false,//是否末级
                // isNoBookkeeping: false,//是否包含未记账
                // accountingName: null,
                beginDepth: 1,
                endDepth: 1,
                isShowDetail: false,
                isDayBook: false,
                // type: 2,//方案分类
                // isDefaultPlan: true,
                beginName: null,
                endName: null,
                beginCode: null,
                endCode: null,
            },
            monthArray: [],
            accountBeginDate: null,//账套开始日期
            accountEndDate: null,//账套结束日期

        };
    },
    created () {
        this.getNowAccount();//获取当前账套
    },
    methods: {
        moment,
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        searchGroup (t, type) {
            if (t == 1) {
                if (type == 'begin') {
                    this.$refs.credentialsSearchA.showModal();
                } else {
                    this.$refs.credentialsSearchB.showModal();
                }
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    if (type == 'begin') {
                        this.$refs.credentialsSearchA.inputSearch();
                    } else {
                        this.$refs.credentialsSearchB.inputSearch();
                    }
                }, 500)
            }
        },
        handlerMonth (e, v, t) {
            console.log(e, v, t)
            if (t == 1) {
                this.$set(this.planData, 'beginDate', e);
                this.planData.beginDate = e;
            } else {
                this.$set(this.planData, 'endDate', e);
                this.planData.endDate = e;
            }

            this.searchPlan();
        },
        getNowAccount () {
            //获取当前账套
            getNowAccount().then(res => {
                if (res.code === 200) {
                    console.log(res);
                    this.monthArray = [];
                    this.accountBeginDate = res.data.beginDate;
                    this.accountEndDate = res.data.endDate;


                    let accountMonthBegin = this.accountBeginDate.split('-');
                    let accountMonthEnd = this.accountEndDate.split('-');

                    let year = accountMonthBegin[0];
                    let month = parseInt(accountMonthBegin[1]);

                    let monthEnd = accountMonthEnd[1];
                    console.log(year, month, monthEnd);

                    for (let i = month; i <= monthEnd; i++) {
                        let m = year + '-' + (i < 10 ? '0' + i : i);
                        this.monthArray.push(m);
                    }

                    this.planData.beginDate = this.monthArray[0];
                    this.planData.endDate = moment().format('YYYY-MM');
                    // this.planData.endDate = this.monthArray[this.monthArray.length - 1];

                    this.searchPlan();
                }
            })
        },
        handleChange () {
            this.searchPlan();
        },
        searchPlan () {
            //搜索列表数据
            fsList(this.planData).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.records;
                }
            })
        },
        setValue (type, data) {
            if (type == 1) {
                this.planData.beginName = data.name;
                this.planData.beginCode = data.code;
            } else {
                this.planData.endName = data.name;
                this.planData.endCode = data.code;
            }

            if ((this.planData.beginCode && this.planData.endCode) || this.planData.beginCode == null || this.planData.endCode == null) {
                this.searchPlan();
            }
        },
    }
};
</script>
<style lang="less" scoped>
    @import '~@/style/purchase/voucher.less';

    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            margin-bottom: 10px;
            .header-tp {
                text-align: left;
            }
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }

        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 280px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                    display: flex;
                }
            }
        }
    }
    .table-null-setyle {
        /deep/.ant-table-placeholder {
            position: static !important;
            top: 0;
        }
    }
</style>